
.login {
    width: 100vw;
    height: 100vh;
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    /*实现水平居中*/
    justify-content: center;

}

.loginForm {
    width: 300px;
    transform: translateY(-40%);  
}

.title {
    text-align: center;
    color: white;

    img {
        height: 44px;
    }
}

.footer{
    position: absolute;
    top: 80vh;
    width: 100vw;
    text-align: center;
    color: rgb(134, 134, 134);
}

.bubbles_bg{
    position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -2;
    background: #1a2163;
    background: linear-gradient(to bottom right, #5560f5, #1b2179);
}

.bubbles {
	position: absolute;
	top: 0;
	left: 0;
	width: 90vw;
	height: 90vh;
	z-index: -1;
}
.bubbles li {
	position: absolute;
	list-style: none;
	display: block;
	width: 40px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.15);
	bottom: -60px;
	animation: square 18s infinite;
	transition-timing-function: linear; 
}
.bubbles li:nth-child(1) {
	left: 10%;
}
.bubbles li:nth-child(2) {
	left: 20%;
	width: 80px;
	height: 80px;
	animation-delay: 2s;
	animation-duration: 12s;
}
.bubbles li:nth-child(3) {
	left: 25%;
	animation-delay: 4s;
}
.bubbles li:nth-child(4) {
	left: 40%;
	width: 60px;
	height: 60px;
	animation-duration: 15s;
	background-color: rgba(255, 255, 255, 0.25);
}
.bubbles li:nth-child(5) {
	left: 70%;
}
.bubbles li:nth-child(6) {
	left: 80%;
	width: 100px;
	height: 100px;
	animation-delay: 3s;
	background-color: rgba(255, 255, 255, 0.2);
}
.bubbles li:nth-child(7) {
	left: 32%;
	width: 80px;
	height: 80px;
	animation-delay: 1s;
}
.bubbles li:nth-child(8) {
	left: 55%;
	width: 20px;
	height: 20px;
	animation-delay: 1.6s;
	animation-duration: 30s;
}
.bubbles li:nth-child(9) {
	left: 25%;
	width: 50px;
	height: 50px;
	animation-delay: 2s;
	animation-duration: 30s;
	background-color: rgba(255, 255, 255, 0.3);
}
.bubbles li:nth-child(10) {
	left: 90%;
	width: 100px;
	height: 100px;
	animation-delay: 4s;
}
.bubbles li:nth-child(11) {
	left: 60%;
}
.bubbles li:nth-child(12) {
	left: 80%;
	width: 80px;
	height: 80px;
	animation-delay: 2s;
	animation-duration: 12s;
}
.bubbles li:nth-child(13) {
	left: 25%;
	animation-delay: 2.6s;
}
.bubbles li:nth-child(14) {
	left: 80%;
	width: 60px;
	height: 60px;
	animation-duration: 15s;
	background-color: rgba(255, 255, 255, 0.25);
}
.bubbles li:nth-child(15) {
	left: 10%;
}
.bubbles li:nth-child(16) {
	left: 20%;
	width: 100px;
	height: 100px;
	animation-delay: 3s;
	background-color: rgba(255, 255, 255, 0.2);
}
@-webkit-keyframes square {
	0% {
        transform: translateY(60);
	}
	100% {
        transform: translateY(-1000px) rotate(400deg);   
	}
}
@keyframes square {
	0% {
		transform: translateY(0);        
	}
	100% {
		transform: translateY(-1200px) rotate(800deg);        
	}
}